<template>
  <div class="medication-tabs">
    <div class="tab-content">
      <template
        v-for="(group, groupIndex) in groupedUsageData"
        :key="groupIndex"
      >
        <template v-for="(row, rowIndex) in getRows(group, 4)" :key="rowIndex">
          <div class="item-row">
            <div
              v-for="(item, index) in row"
              :key="item.usageCode"
              class="tab-item"
              :class="{ selected: selectedItems.includes(item.usageCode) }"
              @click="selectItem(item.usageCode,item.usageName)"
            >
              {{ item.usageName }}
            </div>
          </div>
        </template>
        <div
          v-if="groupIndex < groupedUsageData.length - 1"
          class="divider"
        ></div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import stores from '@/store';
const props = defineProps({
  rxType: {
    type: Number,
  },
});
const useBaseDataStores = stores.useBaseDataStore();
let usageData = ref<any[]>(useBaseDataStores.getDictsSelect('USAGE'));
watch(() => props.rxType, (newValue) => {
  usageData.value = useBaseDataStores.getDictsSelect('USAGE').filter((item: { rxType: any; }) => {
    // 将newValue转换为字符串并检查item.rxType是否包含在该字符串中
    const types = String(item.rxType).split(',');

    return types.includes(String(newValue));  
  });
  //console.log(usageData.value);
},{ immediate: true });

const emits = defineEmits(['select']);
const groupedUsageData = computed(() => {
  const groups: Record<string, any[]> = {};
  usageData.value.forEach((item: any) => {
    if (!groups[item.rxType]) {
      groups[item.rxType] = [];
    }
    (groups[item.rxType] ?? []).push(item);
  });
  return Object.values(groups);
});

const getRows = (arr: any[], size: number) => {
  const rows = [];
  for (let i = 0; i < arr.length; i += size) {
    rows.push(arr.slice(i, i + size));
  }
  return rows;
};

const selectedItems = ref<string[]>([]);

const selectItem = (item: string,usageName:string) => {
  if (selectedItems.value.includes(item)) {
    selectedItems.value = selectedItems.value.filter((i) => i != item);
  } else {
    selectedItems.value.push(item);
  }
  console.log('11111111111',selectedItems,usageName);
  
  // 向父组件传递当前已选中的 usageCode 数组，而不是 ref 对象本身
  emits('select', selectedItems, usageName);
};
</script>

<style scoped>
.medication-tabs {
  width: 360px;
  background: #ffffff;
  box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.2);
  border-radius: 6px 6px 6px 6px;
  overflow: auto;
  height: 300px;
}

.tab-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
}

.item-row {
  display: flex;
  flex-wrap: nowrap;
}

.tab-item {
  width: 84px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border: none;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item:hover {
  background: #def4f3;
  border-radius: 6px 6px 6px 6px;
}

.tab-item.selected {
  background: #def4f3;
  border-radius: 6px 6px 6px 6px;
}

.divider {
  width: 100%;
  height: 5px;
  background: #e5e5e5;
}
</style>
